<template>
    <view class="order_contain" :style="{minHeight: wh + 'px'}">
        <!-- 收货地址 -->
        <my-address></my-address>
        <!-- 上门取件 -->
        <view class="deliveryTime">
            <text style="font-size: 14px;font-weight: 400;margin-bottom: 5px;">免费上门取件</text>
            <text style="font-size: 12px;line-height: 20px;color: #676767;">彼岸收书将预约指定快递上门取件，邮费由彼岸收书承担</text>
            <view class="time">
                <text>请选择上门取件时间：</text>
            </view>
            <!-- 日期选择器 -->
            <dataChage></dataChage>
        </view>
        <!-- 快递备注 -->
        <view class="remark">
            <text>快递备注</text>
            <text style="font-size: 12px;color: #676767;font-weight: 400;">
                请从【德邦】或【京东】中选择可正常收寄的快递，如您不确定或不备注，则由系统根据区域情况自动分配
            </text>
            <hr style="border: none; border-top: 1px solid #ccc;margin-bottom: 5px;" />
            <uni-easyinput style="border: 1px solid #676767;" v-model="value" focus placeholder="请输入快递名称(限两个字,可不填)"
                @input="input"></uni-easyinput>
        </view>
        <!-- 订单详细 -->
        <view class="order">
            <view class="orderlist" v-for="(sellbook,index) in sellbook" :key="index">
                <view class="left">
                    <image src="../../static/sellBook_01.jpg"></image>
                </view>
                <view class="right">
                    <text>{{sellbook.book_name}}</text>
                    <view class="Order_price">
                        <view class="price">回收价:
                            <text>￥{{sellBooksMoney}}</text>
                        </view>
                        <view>
                            <text>x{{sellbook.book_count}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部功能栏 -->
        <view class="Order_buttombox">
            <view class="left">
                <!-- 用户协议 -->
                <view class="agreement">
                    <radio :checked="Radio_state" color="#00b900" @click="changeRadio"> </radio>
                    <view>我已阅读并同意
                        <text style="font-size: 14px;color: #00b900;">《彼岸收书用户协议》</text>
                    </view>
                </view>
                <!-- 订单信息 -->
                <view class="total_text">
                    <view>共计<text>{{sellBooksCount}}</text>本，</view>
                    <view>预估回收价<text>￥{{sellBooksMoney}}</text></view>
                </view>
            </view>
            <view class="right">
                <button v-if="Radio_state" @click="pay_order">提交订单</button>
                <button style="background-color: #676767;" v-else @click="pay_order">提交订单</button>
            </view>
        </view>
    </view>

</template>

<script>
    import {
        mapState,
        mapMutations,
        mapGetters
    } from 'vuex'

    export default {
        data() {
            return {
                input: '',
                //当前设备可用高度
                wh: 0,
                //快递输入框的值
                value: '',
                //用户协议勾选框
                Radio_state: false,
                // 倒计时的秒数
                seconds: 3,
                // 定时器的 Id
                timer: null,
            };
        },
        onLoad() {
            // 获取当前设备系统的信息
            const sysInfo = uni.getSystemInfoSync()
            // 为 wh 窗口可用高度动态赋值
            // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
            this.wh = sysInfo.windowHeight
        },
        computed: {
            ...mapState('sellBookStore', ['sellbook']),
            ...mapGetters('sellBookStore', ['sellBooksMoney', 'sellBooksCount']),
            // 收货详细地址的计算属性
            ...mapGetters('UserStore', ['addstr']),
            ...mapState('UserStore', ['token']),
            ...mapState('sellOrderStore', ['sellTime']),
            ...mapState('UserStore', ['address']),

        },
        methods: {
            ...mapMutations('UserStore', ['updateRedirectInfo']),
            ...mapMutations('sellOrderStore', ['addorder']),

            changeRadio() {
                this.Radio_state = !this.Radio_state
            },
            //提交订单功能
            pay_order() {
                //未勾选用户协议
                if (!this.Radio_state) return uni.showToast({
                    title: '您还未查看并勾选用户协议！',
                    duration: 1500,
                    icon: 'none',
                })
                //未选择地址
                if (!this.addstr) return uni.showToast({
                    title: '请填写您的地址信息',
                    icon: 'error',
                    duration: 2000
                });
                //未选择时间
                if (this.sellTime.length === 0) return uni.showToast({
                    title: '请选择取件时间',
                    icon: 'error',
                    duration: 2000
                });
                //未登录
                if (!this.token) return this.delayNavigate()
                const order = {
                    order_id: 1,
                    sellbook: this.sellbook, //订单信息
                    count: this.sellBooksCount, //订单数量
                    money: this.sellBooksMoney, //订单价格
                    sellTime: this.sellTime, //取件时间
                    addstr: this.addstr, //取件地址
                    orderState: 0 // 订单状态 0/待审核   1/通过  2/未通过 
                }
                //全部通过时
                uni.showModal({
                    title: '卖书必读',
                    content: '1.目前订单包裹签收后7天，将完成书籍的审核与打款(审核周期内勿催);2.为避免混单，影响审核到账时间，您需要对订单书籍自行打包后待取件员验货封口(包装上备注订单编号)。如随意放置导致订书籍丢失，平台概不负责',
                    cancelText: '取消',
                    confirmText: "确定提交",
                    confirmColor: "#13962c",
                    success: (res) => {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            //增加订单
                            this.addorder(order)
                            uni.navigateTo({
                                url: "/subpkg/order_commit/order_commit?id=" + order.order_id,
                            })
                        }
                    }
                });
            },
            // 展示倒计时的提示消息
            showTips(n) {
                // 调用 uni.showToast() 方法，展示提示消息
                uni.showToast({
                    // 不展示任何图标
                    icon: 'none',
                    // 提示的消息
                    title: '请登录后再提交！' + n + ' 秒后自动跳转到登录页',
                    // 为页面添加透明遮罩，防止点击穿透
                    mask: true,
                    // 1.5 秒后自动消失
                    duration: 1500
                })
            },
            // 延迟导航到 my 页面
            delayNavigate() {
                //展示提示消息，此时 seconds 的值等于 3
                this.seconds = 3
                this.showTips(this.seconds)
                //创建定时器，每隔 1 秒执行一次
                this.timer = setInterval(() => {
                    //先让秒数自减 1
                    this.seconds--
                    //判断秒数是否 <= 0
                    if (this.seconds <= 0) {
                        //清除定时器
                        clearInterval(this.timer)
                        //跳转到 my 页面
                        uni.switchTab({
                            url: '/pages/my/my',
                            // 页面跳转成功之后的回调函数
                            success: () => {
                                // 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
                                this.updateRedirectInfo({
                                    // 跳转的方式
                                    openType: 'navigateTo',
                                    // 从哪个页面跳转过去的
                                    from: '/subpkg/book_order/book_order'
                                })
                            }
                        })
                        //终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息）
                        return
                    }
                    //再根据最新的秒数，进行消息提示
                    this.showTips(this.seconds)
                }, 1000)
            },

        }
    }
</script>

<style lang="scss">
    .order_contain {
        width: 100%;
        height: 100%;
        background-color: #f1f1f1;
        padding: 5px;
        display: flex;
        flex-direction: column;
        padding-bottom: 60px;

        // 上门取件
        .deliveryTime {
            padding: 10px;
            display: flex;
            flex-direction: column;
            margin-top: 5px;
            background-color: #fff;
            margin-right: 10px;
            padding-bottom: 15px;
            border-radius: 5px;

            .time {
                display: flex;
                justify-content: space-between;
                padding: 5px;
                margin-top: 5px;
                background-color: #c1c1c1;
                border-radius: 5px;

                view {
                    font-size: 12px;
                    color: #676767;
                    display: flex;
                    align-items: center;
                    text-align: center;
                }

                text {
                    padding-left: 5px;
                    font-size: 14px;
                    font-weight: 600;
                }
            }
        }

        // 快递备注
        .remark {
            padding: 10px;
            display: flex;
            flex-direction: column;
            margin-top: 5px;
            background-color: #fff;
            margin-right: 10px;
            padding-bottom: 15px;
            border-radius: 5px;

            text {
                padding-left: 5px;
                font-size: 14px;
                font-weight: 400;
                margin-bottom: 10px;
            }
        }

        // 订单详细
        .order {
            padding: 10px;
            display: flex;
            flex-direction: column;
            margin-top: 5px;
            background-color: #fff;
            margin-right: 10px;
            padding-bottom: 15px;
            border-radius: 5px;

            .orderlist {
                display: flex;
                margin-top: 10px;

                .left {
                    image {
                        width: 80px;
                        height: 80px;
                        object-fit: cover;
                        margin-top: 3px;
                    }
                }

                .right {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    text {
                        font-size: 14px;
                        font-weight: 400;
                    }

                    .Order_price {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;

                        .price {
                            font-size: 12px;
                            color: #676767;

                            text {
                                font-size: 16px;
                                color: #b07500;
                            }
                        }
                    }
                }
            }
        }

        //底部功能栏
        .Order_buttombox {
            height: 60px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            position: fixed;
            bottom: 0px;
            background-color: #fff;
            align-items: center;
            border-top: 1px solid #d8cece;

            .left {
                display: flex;
                flex-direction: column;
                line-height: 20px;
                padding: 5px;

                .agreement {
                    display: flex;

                    radio {
                        transform: scale(0.6);
                    }

                    view {
                        font-size: 12px;
                        color: #676767;
                    }
                }

                .total_text {
                    display: flex;
                    padding-left: 5px;

                    view {
                        font-size: 12px;

                        text {
                            font-size: 14px;
                            color: #b07500;
                        }
                    }
                }
            }

            .right {

                button {
                    margin-right: 10px;
                    font-size: 10px;
                    background-color: #00aa00;
                    color: #fff;
                    border-radius: 15px;
                }

            }
        }
    }
</style>